<script setup lang="ts">
import { ref,onMounted,reactive, } from 'vue'
import { ElScrollbar } from 'element-plus'
import { Calendar, Search } from '@element-plus/icons-vue'
import type { FormItemProps, FormProps } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
interface RuleForm {
  name: string
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: 'Hello',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')

const max = ref(0)
const value = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()

onMounted(() => {
  max.value = innerRef.value!.clientHeight - 380
})

const inputSlider = (value: number) => {
  scrollbarRef.value!.setScrollTop(value)
}
const scroll = ({ scrollTop }: { scrollTop: number }) => { // 为 scrollTop 添加类型定义
  value.value = scrollTop
}
const formatTooltip = (value: number) => {
  return `${value} px`
}
const input = ref('')
const textarea = ref('')
</script>

<template>
  <h1>hello</h1>
  <el-button type="primary">Primary</el-button>
  <el-input v-model="input" style="width: 240px" placeholder="Please input" />
  <br>
  <br>
    <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary"size="large">Primary</el-button>
    <el-button type="success" size="small">Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" color="#626aef" disabled>Danger</el-button>
    </div>
  <br>
  <el-button-group>
    <el-button type="primary" loading>Loading</el-button>
    <el-button type="primary" loading>
      <template #loading>
        <div class="custom-loading">
          <svg class="circular" viewBox="-10, -10, 50, 50">
            <path
              class="path"
              d="
              M 30 15
              L 28 17
              M 25.61 25.61
              A 15 15, 0, 0, 1, 15 30
              A 15 15, 0, 1, 1, 27.99 7.5
              L 15 15
            "
              style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
            />
          </svg>
        </div>
      </template>
      Loading
    </el-button>
  </el-button-group>
  <br>
  <br>
    <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background-color: red;">Aside</el-aside>
      <el-container>
        <el-header style="background-color: blue;">Header</el-header>
        <el-main style="background-color: green;">Main</el-main>
        <el-footer style="background-color: yellow;">Footer</el-footer>
      </el-container>
    </el-container>
    </div>
  <br>
  <!-- <el-row>
    <el-col :span="4"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" style="background-color: white;"/></el-col>
  </el-row>
    <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
  </el-row>
      <el-row :gutter="20">
    <el-col :span="8"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
  </el-row>
    <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" style="background-color: white;"/>
    </el-col>
  </el-row>
    <el-row class="row-bg" justify="end">
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" style="background-color: white;"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" style="background-color: white;"/></el-col>
  </el-row> -->
<p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
</p>
  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409efc" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
  <br>
  <el-text class="mx-1" size="large">Default </el-text>
  <el-text class="mx-1" type="primary" size="small">Primary  </el-text>
  <el-text class="mx-1" type="success">Success  </el-text>
  <el-text class="mx-1" type="info">Info  </el-text>
  <el-text class="mx-1" type="warning">Warning  </el-text>
  <el-text class="mx-1" type="danger" tag="del">Danger  </el-text>
  <br>
  <el-text line-clamp="2">
    The -webkit-line-clamp CSS property<br />
    allows limiting of the contents of<br />
    a block to the specified number of lines.
  </el-text>
  <br>
    <el-input v-model="input" style="width: 240px; color:white;" placeholder="Please input" disabled/>
    <br>
    <br>
    <el-input v-model="textarea" style="width: 240px; color:white;" type="password" placeholder="Please input password" show-password clearable/>
    <br>
    <br>
    <el-input v-model="textarea" style="width: 240px; color:white;" :rows="3" type="textarea" placeholder="Please input" />
    <br>
    <br>
     <div class="flex gap-4 mb-4">
    <span>Using attributes    </span>
    <el-input
      v-model="input1"
      style="width: 240px"
      placeholder="Pick a date"
      :suffix-icon="Calendar"
    />
    <el-input
      v-model="input2"
      style="width: 240px"
      placeholder="Type something"
      :prefix-icon="Search"
    />
  </div>
  <br>
  <div class="flex gap-4">
    <span>Using slots   </span>
    <el-input v-model="input3" style="width: 240px" placeholder="Pick a date">
      <template #suffix>
        <el-icon class="el-input__icon"><calendar /></el-icon>
      </template>
    </el-input>
    <el-input
      v-model="input4"
      style="width: 240px"
      placeholder="Type something">
      <template #prefix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
    </el-input>
  </div>
  <br>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <!-- </el-form> -->
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio value="Sponsor">Sponsor</el-radio>
        <el-radio value="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
    <br>
  </el-form>
      <el-form-item label="Form Align" label-position="top">
      <el-radio-group v-model="labelPosition" aria-label="label position">
        <el-radio-button value="left">Left</el-radio-button>
        <el-radio-button value="right">Right</el-radio-button>
        <el-radio-button value="top">Top</el-radio-button>
      </el-radio-group>
    </el-form-item>
</template>

<style scoped>
  .el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>



